import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './login.css'
import { Form, Icon, Input, Button, Checkbox } from 'antd'

const FormItem = Form.Item

class LoginForm extends React.Component {
  constructor (props) {
    super(props)
  }
  handleSubmit = (e) => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.loginSubmit(values)
        console.log('Received values of form: ', values)
      } else {
        console.log('输入有误')
      }
    })
  }
  render() {
    const { getFieldDecorator } = this.props.form
    return (
      <div styleName='login-form'>
        <Form onSubmit={this.handleSubmit}>
          <FormItem>
            {getFieldDecorator('username', {
              rules: [{ required: true, message: 'Please input your username!' }],
            })(
              <Input prefix={<Icon type='user' style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder='Username' />
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator('password', {
              rules: [{ required: true, message: 'Please input your Password!' }],
            })(
              <Input prefix={<Icon type='lock' style={{ color: 'rgba(0,0,0,.25)' }} />} type='password' placeholder='Password' />
            )}
          </FormItem>
          <FormItem>
            <Button type='primary' htmlType='submit' styleName='login-form-button'>
              Log in
            </Button>
          </FormItem>
        </Form>
      </div>
    )
  }
}

const CSSLoginForm = CSSModules(LoginForm, styles)

export default Form.create()(CSSLoginForm)

// export default CSSModules(WrappedLoginForm, styles)
// export default WrappedLoginForm
